Title: Music Notation
Order: 2
---

<p>
	Rendering standard music notation is one of the essential features of alphaTab. 
</p>
	   
<h2>Clefs</h2>

<p>
	Clefs are important for music notation too.
</p>

<div id="alphaTabClefs" data-tex="true">
	\title "Clefs"
	.
	\clef G2 | \clef F4 | \clef C3 | \clef C4
</div>
<script type="text/javascript">
	$('#alphaTabClefs').alphaTab({
		staves: ['score'],
		layout: {
			mode: 'page',
			additionalSettings: {
				hideInfo: true
			}
		}
	});
</script>

<h2>Key Signatures</h2>

<p>
	Want key signatures? No problem, alphaTab will render them for you. 
</p>

<div id="alphaTabKeySignatures" data-file="@Context.GetLink("/assets/files/features/KeySignatures.gp5")"></div>
<script type="text/javascript">
	$('#alphaTabKeySignatures').alphaTab({
		staves: ['score']
	});
</script>

<h2>Time Signatures</h2>


<p>
	Time signatures are important too.  
</p>

<div id="alphaTabTimeSignatures" data-file="@Context.GetLink("/assets/files/features/TimeSignatures.gp5")"></div>
<script type="text/javascript">
	$('#alphaTabTimeSignatures').alphaTab({
		staves: ['score']
	});
</script>

<h2>Notes, Rests and Beams</h2>

<p>
	We automatically create beams for notes and ensure they are aligned in the most readable way. 
</p>

<div id="alphaTabBeams" data-file="@Context.GetLink("/assets/files/features/Beams.gp5")"></div>
<script type="text/javascript">
	$('#alphaTabBeams').alphaTab({
		staves: ['score']
	});
</script>

<h2>Accidentals</h2>

<p>
	Accidentals are an essential element of music notation.
</p>

<div id="alphaTabAccidentals" data-file="@Context.GetLink("/assets/files/features/Accidentals.gp5")"></div>
<script type="text/javascript">
	$('#alphaTabAccidentals').alphaTab({
		staves: ['score']
	});
</script>
